<!doctype html>
<html lang="zh">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
    <script type="module" src="https://unpkg.com/@assister/chat@latest/dist/chat/chat.esm.js"></script>
    <link href="https://unpkg.com/@assister/chat@latest/dist/chat/chat.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        :root {
            /* --message-incoming-color: yellow; */
        }
    </style>
    <script>
        function randomResponse(question) {
            return new Promise((resolve,reject)=>{
                axios.post("http://10.0.30.2:5005/webhooks/rest/webhook", {"sender": "0", "message": question}).then(res=>{
                    resolve(res.data);

                }).catch(error=>{
                    reject(error)
                })
            })
        }
        const wait = () => new Promise(resolve => setTimeout(resolve, 500));
        window.onload = () => {
            const fab = document.getElementById('fab');
            document.getElementById('close').addEventListener('click', () => fab.close());
            const pane = document.getElementById('pane');
            function handleIncomingMessage(event) {
                const message = event.detail;
                console.log(message.text)
                const answer = randomResponse(message.text).then(data=>{
                    if(data.length){
                        wait()
                            .then(() => message.state = 'delivered')
                            .then(wait)
                            .then(() => message.state = 'read')
                            .then(wait)
                            .then(() => pane.addIncomingMessage(data[0].text));
                    }else {
                        wait()
                            .then(() => message.state = 'delivered')
                            .then(wait)
                            .then(() => message.state = 'read')
                            .then(wait)
                            .then(() => pane.addIncomingMessage("请问需要什么帮助吗？"));
                    }
                })


            }
            pane.addEventListener('incoming', handleIncomingMessage);
        }
    </script>
</head>
<body>
<ion-app>
    <ion-header>
        <ion-toolbar color="primary">
            <ion-title>Home</ion-title>
        </ion-toolbar>
    </ion-header>
    <ion-content>
        <ion-list>
            <ion-item style="height: 3000px">
                I'm here for scroll!
            </ion-item>
        </ion-list>
    </ion-content>
</ion-app>

<fab-app id="fab">
    <chat-pane id="pane">
        <ion-toolbar slot="header" color="primary">
            <ion-title>瑞普智能客服</ion-title>
            <ion-buttons slot="primary">
                <ion-button id="close">
                    <ion-icon slot="icon-only" name="close" />
                </ion-button>
            </ion-buttons>
        </ion-toolbar>
<!--        <ion-card style="background: white;">-->
<!--            <ion-card-content>-->
<!--                <p>你好，我是智能客服小瑞，有什么需要帮助？</p>-->
<!--            </ion-card-content>-->
<!--        </ion-card>-->
    </chat-pane>
</fab-app>
</body>
</html>